<template>
  <div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearList"
    >
      <template #btns>
        <el-button
          type="primary"
          :loading="exportLoading"
          @click="exportExcel"
        >{{ $t("message.daochu") }}</el-button>
      </template>
    </QueryForm>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table doumee-element-tableb"
    >
      <el-table-column
        align="center"
        :label="$t('message.ddh')"
        prop="orderId"
        min-width="220"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span class="ckxqBtn" @click="handleDetail(scope.row.id)">{{
            scope.row.orderId
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.yhxx')"
        prop="userInfo"
        min-width="220"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.yqpcmc')"
        prop="jointSiteName"
        min-width="140"
      />
      <el-table-column
        align="center"
        :label="$t('message.bmsj')"
        prop="createTime"
        min-width="160"
      />
      <el-table-column
        align="center"
        :label="$t('message.zfje')"
        prop="price"
        min-width="120"
      />
      <el-table-column
        align="center"
        :label="$t('message.zffs')"
        prop="payMethod"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.paytime')"
        min-width="160"
        prop="payTime"
        show-overflow-tooltip
      />
      <el-table-column
        :label="$t('message.zfzt')"
        prop="payStatusName"
        min-width="120"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        :label="$t('message.caozuo')"
        min-width="120"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              v-if="scope.row.payStatus == 3"
              v-preventReClick
              type="text"
              @click="refundOrder(scope.row.id)"
            >{{ $t("message.tk") }}</el-button>
            <el-button
              v-if="scope.row.payStatus == 3"
              v-preventReClick
              type="text"
              @click="printTC(scope.row.orderId)"
            >{{ $t("message.dyxp") }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="pageSizeChange"
    />
    <OrderDetail ref="OrderDetail" />
    <PrintTem v-if="isPrint" ref="printTemRef" />
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import store from '@/store'
import { exportJointOrderList, refundJointOrder, getJointOrderList, printOrder } from '@/api'
import OrderDetail from './orderDetail.vue'
import QueryForm from '@/components/QueryForm'
import PrintTem from '@/components/printTem'
export default {
  components: {
    QueryForm, OrderDetail,
    PrintTem
  },
  data() {
    return {
      exportLoading: false,
      isPrint: false,
      queryFormConfig: {
        formItems: [{
          filed: 'orderId',
          type: 'input',
          label: this.$t('message.ddh'),
          clearable: true
        }, {
          filed: 'userInfo',
          type: 'input',
          label: this.$t('message.yhxx'),
          placeholder: this.$t('message.hy3'),
          clearable: true
        }, {
          filed: 'jointName',
          type: 'input',
          label: this.$t('message.yqpcmc'),
          clearable: true
        }],
        online: true
      },
      modalDialog: store.getters.dialog,
      list: [],
      meta: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      filters: {},
      listLoading: true,
      id: ''
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
  },
  methods: {
    handleDetail(id) {
      this.$refs.OrderDetail.getOrderDetail(id)
    },
    printTC(id) {
      this.isPrint = true
      printOrder({
        param: {
          contentMap: {},
          venueId: sessionStorage.getItem('venueId'),
          workId: id,
          templateCode: 'JOINTSITETPML'
        }
      })
        .then(res => {
          if (res.record && res.record.isPrint === '1' && res.record.dataList && res.record.dataList.length > 0) {
            res.record.dataList.forEach(item => {
              this.$refs.printTemRef.obj = { ...item }
              setTimeout(() => {
                this.$refs.printTemRef.print()
              }, 300)
              setTimeout(() => {
                this.isPrint = false
              }, 500)
            })
          } else {
            this.isPrint = false
          }
        }).catch((err) => {
          this.isPrint = false
          console.log(err)
        })
    },
    exportExcel() {
      this.exportLoading = true
      const { filters } = this
      exportJointOrderList({
        param: { ...filters, venueId: sessionStorage.getItem('venueId') }
      })
        .then((res) => {
          this.exportLoading = false
          if (res.errorCode === '000000') {
            window.open(res.record.showUrl, '_blank')
          }
        })
        .catch(() => { this.exportLoading = false })
    },
    refundOrder(id) {
      const that = this
      this.$confirm(this.$t('message.tktcqr'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning',
        callback: () => { },
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          refundJointOrder({ param: { id }}).then((res) => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success(this.$t('message.tktcqr'))
              that.getList()
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => { })
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getList(1)
    },
    clearList() {
      this.filters = {}
      this.getList(1)
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      getJointOrderList({ pagination, param: { venueId, ...filters }})
        .then(res => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList
          this.total = res.totalCount
          if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
            this.getList(Math.ceil(res.totalCount / pagination.rows))
          }
          this.$refs.table.doLayout()
        })
        .catch(() => {
          this.listLoading = false
        })
    }
  }
}
</script>

